<template>
    <div class="production-plan">
        <!-- 修改按钮点击事件 -->
        <el-button type="primary" @click="GetPackagingPlanlist">查看包装计划</el-button>
        <h3 class="title">包装计划</h3>
        <!-- 基本信息 -->
        <div class="basic-info">
            <div class="info-row">
                <span class="info-label">计划类型</span>
                <span>{{ formData.planType === '1'? '包装计划' : formData.planType === '2'? '过滤计划' : '其他计划' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">计划日期</span>
                <span>{{ formatDate(formData.scheduledDates) }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">包装规格</span>
                <span>{{ formData.packingSpecifications }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">包装形式</span>
                <span>{{ formData.packagingForm }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">产品系列</span>
                <span>{{ formData.productRange }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">计划产量</span>
                <span>{{ formData.plannedProduction }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">产量单位</span>
                <span>{{ formData.productionUnits }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">备注</span>
                <span>{{ formData.remark }}</span>
            </div>
        </div>

        <!-- 计划明细 -->
        <div class="detail-section">
            <h1 class="sub-title">计划明细</h1>
            <div v-for="(row, index) in planDetailsList" :key="index" class="detail-row">
                <div class="detail-col">
                    <span class="detail-label">车间名称</span>
                    <span>{{  row.workshopName }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">工段名称</span>
                    <span>{{ row.workSectionName }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">产线名称</span>
                    <span>{{ row.productionLineName }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">设备名称</span>
                    <span style="width: 160px;">{{  row.deviceName }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">开始日期</span>
                    <span>{{ formatDate(row.friDate) }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">结束日期</span>
                    <span>{{ formatDate(row.endDate) }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">负责人</span>
                    <span>{{ row.leader }}</span>
                </div>
                <div class="detail-col">
                    <span class="detail-label">人员数量</span>
                    <span>{{ row.personnelNumber }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 主表单数据
const formData = reactive({
    preparation: true,
    picking: true,
    planType: '',
    packagingPlanId: route.query.packagingPlanId,
    scheduledDates: new Date(),
    packingSpecifications: "",
    packagingForm: "",
    productRange: "",
    plannedProduction: 0,
    productionUnits: "",
    isload: 0,
    remark: ""
});

// 明细数据列表
const planDetailsList = ref([]);

// 下拉框选项
const workshopOptions = ref([]);
const workSectionOptions = ref([]);
const productionLineOptions = ref([]);
const deviceOptions = ref([]);

// 统一错误处理函数
const handleError = (error, message) => {
    console.error(message, error);
    ElMessage.error(`${message}，请检查网络或联系管理员`);
};

// 获取基本信息
const GetOutsourcingBYId = async () => {
    try {
        const response = await axios.get(`http://8.154.44.176:8000/p2-read/api/PackagingPlan/GetBYIdPackagingPlan`, {
            params: {
                PackagingPlanId: route.query.packagingPlanId
            }
        });
        const responseData = response.data.data[0];
        responseData.scheduledDates = new Date(responseData.scheduledDates);
        Object.assign(formData, responseData);
    } catch (error) {
        handleError(error, '获取主表信息失败');
    }
};

// 获取明细信息
const GetOutsourcingDeatilBYId = async () => {
    try {
        const response = await axios.get(`http://8.154.44.176:8000/p2-read/api/PackagingPlan/GetBYIdPackagingPlanDetails`, {
            params: {
                PackagingPlanId: route.query.packagingPlanId
            }
        });
        planDetailsList.value = response.data.data.map(item => ({
            ...item,
            friDate: item.friDate ? new Date(item.friDate) : null,
            endDate: item.endDate ? new Date(item.endDate) : null,
            packagingPlanId: item.packagingPlanId || formData.packagingPlanId,
            isSaved: true,
            productInfoFilled: item.productInfoFilled || false
        }));
    } catch (error) {
        handleError(error, '获取明细表信息失败');
    }
};

// 获取下拉框选项数据（假设接口获取）
const getOptionsData = async () => {
    try {
        // 这里需要根据实际接口替换
        const workshopResponse = await axios.get('your_workshop_options_api');
        workshopOptions.value = workshopResponse.data;

        const workSectionResponse = await axios.get('your_workSection_options_api');
        workSectionOptions.value = workSectionResponse.data;

        const productionLineResponse = await axios.get('your_productionLine_options_api');
        productionLineOptions.value = productionLineResponse.data;

        const deviceResponse = await axios.get('your_device_options_api');
        deviceOptions.value = deviceResponse.data;
    } catch (error) {
        handleError(error, '获取下拉框选项数据失败');
    }
};

onMounted(async () => {
    const packagingPlanId = route.query.packagingPlanId;
    if (!packagingPlanId) {
        ElMessage.error('缺少必要的计划ID参数');
        return;
    }
    await GetOutsourcingBYId();
    await GetOutsourcingDeatilBYId();
    await getOptionsData();
});

// 跳转包装计划列表
const GetPackagingPlanlist = () => {
    router.push('GetPackagingPlanlistView');
};


// 日期格式化函数
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 根据值获取选项标签
const getOptionLabel = (options, value) => {
    const option = options.find(item => item.id === value);
    return option? option.label : '未知';
};
</script>

<style scoped>
.production-plan {
    padding: 20px;
}

.title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
    color: cornflowerblue;
}

.sub-title {
    margin: 20px 0 10px;
    font-size: 30px;
    font-weight: 500;
    color: chartreuse;
}

.basic-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    align-items: center;
}

.info-label {
    width: 120px;
    font-weight: bold;
}

.detail-section {
    width: 100%;
}

.detail-row {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.detail-col {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-weight: bold;
}
</style>    